@import "common.css";

/* MAIN */

body {
    background-color: #000;
    color: #fff;
}

/* STATES */

.state {

}

.state.loggedout #button-logout,
.state.loggedout #user-picture {
    display: none;
}

.state.loggedin #button-login {
    display: none;
}

/* USER PANEL */

#user-panel {
    /*
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    */
    width: 100%;
    text-align: right;
}

#users-list-container {
    width: 100%;
    display: block;
    text-align: center;
}
    #users-list-container .picture {
        display: inline-block;
        cursor: pointer;
        position: relative;
        transition: all 0.33s;
        -webkit-transition: all 0.33s; /* Safari */

        z-index: 1;

        transform: scale(0.9);
        -ms-transform: scale(0.9); /* IE 9 */
        -webkit-transform: scale(0.9); /* Safari and Chrome */

        opacity: 0.5;
    }
        #users-list-container .picture img {
            cursor: pointer;
            margin: 0.25em;
        }
        #users-list-container .picture .name {
            position: absolute;
            display: none;
        }

    #users-list-container .picture.selected {
        background-color: #fff;
        z-index: 2;

        transform: scale(1.25);
        -ms-transform: scale(1.25); /* IE 9 */
        -webkit-transform: scale(1.25); /* Safari and Chrome */

        opacity: 1;
    }
        #users-list-container .picture.selected .name {
            display: block;
            width: 15em;
            text-align: center;
            margin-top: 0;
            margin-left: -5em;
        }
        #users-list-container .picture.selected img {

        }

/* GALLERY */


#gallery-container {
    width: 100%;
    height: 100%;
    /*
    top: 0;
    left: 0;
    position: absolute;
    z-index: 1;
    */
}
    #gallery-container .gallery {

    }
    #gallery-container .row {
        text-align: center;
        margin-bottom: 1em;
    }
    #gallery-container .title {
        color: #fff;
        text-align: center;
        font-size: 1.5em;
        margin-bottom: 0.25em;
    }
    #gallery-container .photo {
        display: inline-block;
        vertical-align: middle;
        margin: 0.25em;
    }
        #gallery-container .photo img {
            transition: all 1s;
            -webkit-transition: all 1s; /* Safari */
            opacity: 0;
        }